<template>
<div>
    <div class="less_style">
    <h1>{{msg}}</h1>    
    </div>
    <div class="scss_style">{{msg}}</div>
     <div>{{msg}}</div>
</div>
    
</template>
<script>
export default{
    data(){
        return{
            msg: 'Hello BoolStudio!'
        }
    }
}
</script>
<style lang="less" scoped>
    @width:300px;
    @height:300px;
    .less_style{
        width: @width;
        height: @height;
        background: chocolate;
        h1{
            color: rgb(255, 0, 0);
        }
    }
</style>
<style lang="scss" scoped>
$width: 200px;
$height: 200px;
.scss_style{
    width: 200px;
    height: 200px;
    background: rgb(100, 149, 237);
}

</style>